<template>
  <div style="height: calc(100vh - 50px)">
    <!--地图Div-->
    <div class="map-display" id="mapDiv">
      <!--信息窗口 （若用ext的方式则用不到-->
      <!--<div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content"></div>
      </div>-->
    </div>
    <!--地图左上角按钮栏-->
    <div id="myToolBtns" class="mytool-btns">
      <div id="buttonDiv" style="float: left;">
        <div class="navbtn-items" v-if=layerShow @click="togglePanel('lyrPanelVisible','layerFlag')" title="图层" id="layerBtn">
          <img src="../../assets/images/map_icons/layer.png">
          <img v-show="layerFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <div class="navbtn-items" v-if=measureShow @click="togglePanel('measurePanelVisible','measureFlag')" title="地图量测" id="measureBtn">
          <img src="../../assets/images/map_icons/measure.png">
          <img v-show="measureFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <div class="navbtn-items" v-if=decorateShow @click="togglePanel('decoratePanelVisible','decorateFlag')" title="地图整饰控制" id="decorateBtn">
          <img src="../../assets/images/map_icons/Decorate.png">
          <img v-show="decorateFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>

        <div class="navbtn-items" v-if=attrQueryPanelShow @click="togglePanel('attrQueryPanelVisible','attrQueryFlag')" title="属性查询" id="attrQueryBtn">
          <img src="../../assets/images/map_icons/shuxing.png">
          <img v-show="attrQueryFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <div class="navbtn-items" v-if=geometryQueryPanelShow @click="togglePanel('geometryQueryPanelVisible','geometryQueryFlag')" title="几何查询" id="geometryQueryBtn">
          <img src="../../assets/images/map_icons/kongjian.png">
          <img v-show="geometryQueryFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <!--<div class="navbtn-items" v-if=distanceQueryPanelShow @click="togglePanel('distanceQueryPanelVisible','distanceQueryFlag')" title="距离查询" id="distanceQueryBtn">
          <img src="../../assets/images/map_icons/juli.png">
          <img v-show="distanceQueryFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>-->
        <div class="navbtn-items" v-if=bufferAnalystPanelShow @click="togglePanel('bufferAnalystPanelVisible','bufferAnalystFlag')" title="缓冲区分析" id="bufferAnalystBtn">
          <img src="../../assets/images/map_icons/huanchongqu.png">
          <img v-show="bufferAnalystFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>

        <div class="navbtn-items" v-if=heatMapAnalystPanelShow @click="togglePanel('heatMapAnalystPanelVisible','heatMapAnalystFlag')" title="热力图" id="heatMapAnalystBtn">
          <img src="../../assets/images/map_icons/relitu.png">
          <img v-show="heatMapAnalystFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <div class="navbtn-items" v-if=clusterLayerPanelShow @click="togglePanel('clusterLayerPanelVisible','clusterLayerFlag')" title="聚类" id="clusterLayertBtn">
          <img src="../../assets/images/map_icons/cluster.png">
          <img v-show="clusterLayerFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <div class="navbtn-items" v-if=thiessenAnalystPanelShow @click="togglePanel('thiessenAnalystPanelVisible','thiessenAnalystFlag')" title="泰森多边形" id="thiessenAnalystBtn">
          <img src="../../assets/images/map_icons/duobianxing.png">
          <img v-show="thiessenAnalystFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>

      </div>
    </div>

    <!--图层管理面板-->
    <div class="layerBox" :class="{'layer-hide':lyrPanelVisible}" :id="lyrBox">
      <div id="panelHeader">
        <div class="options lyropt">
          <span style="font-weight: bold;font-size: 1.2em;">图层管理面板</span>
          <el-checkbox @change="handleOpt" style="color: black; float: right;">图层透明度调节</el-checkbox>
        </div>
      </div>
    </div>

    <!--“量测”下拉-->
    <div class="mapMeasurementTools" :class="{'layer-hide':measurePanelVisible}">    <!--tool-item-panel v-if="measurePanelVisible"-->
      <div class="map-tool-item" title="测面积" id="myMeasureArea">  <!--@click="myMeasureArea" @click="triggerBus('area')"-->
        <img src="../../assets/images/map_icons/Area.png" />
        <span>面积</span>
      </div>
      <div class="map-tool-item" title="测距离" id="myMeasureDistance">    <!-- @click="myMeasureDistance" @click="triggerBus('distance')"-->
        <img src="../../assets/images/map_icons/Distance.png" />
        <span>距离</span>
      </div>
      <div class="map-tool-item" title="清除量测结果" id="myClearMeasure">  <!--@click="myClearMeasure" @click="triggerBus('clean')"-->
        <img src="../../assets/images/map_icons/清空.svg" />
        <span>清除</span>
      </div>
    </div>

    <!--“整饰”下拉-->
    <div class="tool-item-panel mapDecorateTools" id="mapDecorateTools" :class="{'layer-hide':decoratePanelVisible}" data-toolPanel-title="Decorate">
      <div class="map-tool-item"  id="CoordinateDisplay" title="坐标" @click="coordinateShow=!coordinateShow">
        <img src="../../assets/images/map_icons/Coordinate.png">
        <span>坐标</span>
      </div>
      <div class="map-tool-item"  id="ScaleDisplay" title="比例尺" @click="scaleShow=!scaleShow">
        <img src="../../assets/images/map_icons/Scale.png">
        <span>比例尺</span>
      </div>
      <!--<div class="map-tool-item"  id="LegendDisplay" title="图例">
        <img src="../../assets/images/map_icons/legend_menuItem.png">
        <span>图例</span>
      </div>-->
      <!--<div class="map-tool-item"  id="GraticuleDisplay" title="经纬网格">
          <img src="../../dist/mapctrl/mcicons/Legend.png">
          <span>经纬网格</span>
      </div>-->
      <!--<div class="map-tool-item"  id="styleChange" title="调整矢量图层标签等样式">
        <img src="../../dist/img/navbtn/样式.png">
        <span>矢量标签</span>
      </div>-->
    </div>

    <!--坐标与比例尺-->
    <div class="coordinateAndScaleBar">
      <!--地图比例尺-->
      <div id="scaleBarDiv" class="map-scalebar" v-show="scaleShow">
        <div id="scaleBar"></div>
      </div>
      <!--地图坐标 (id必须为mouse-position，否则无法正常显示)-->
      <div class="map-decorate map-coordinate custom-mouse-position" id="mouse-position" v-show="coordinateShow"></div>
    </div>

    <!--基于sm案例采用这个-->
    <!--<div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>-->

    <!--进度条-->
    <div id="preview">
      <img src="../../assets/images/waiting.gif" alt='' /><br />
      <br />
      <span>正在查询/分析，请稍候……</span>
    </div>

    <!--属性查询-->
    <div :class="{'layer-hide':attrQueryPanelVisible}" id="sxcx" style="background-color: rgba(255,255,255,0.5);">
      <el-select
        v-model="value1"
        multiple
        style="margin-left: 45px;"
        placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select
        v-model="value2"
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <!--<el-tag type="info">条件 :</el-tag>-->
      <el-input v-model="attQueryConditions" style="margin-left:20px;width:200px;"  placeholder="请输入查询条件" clearable />
      <!--class="conditionControl"-->
      <!--<label class="labelClass">条件 :</label>-->
      <!--<input type="text" id="Conditions" name="type" class="btnInputClass" value="name='中国'"/>-->

      <el-button
        style="position:absolute;margin-left: 1em;"
        type="primary"
        icon="el-icon-search"
        @click="AttQuery"
      >
        <!--@click="attrQuery"-->
        查询
      </el-button>
    </div>

    <!--几何空间查询-->
    <div :class="{'layer-hide':geometryQueryPanelVisible}" id="jhcx" style="margin-left: 45px; margin-top:20px;">
      <el-button
        style="position:absolute;margin-left: 1em;"
        type="success"
        round
        icon="el-icon-search"
        @click="geometryQuery"
      >
        <!--@click="geometryQuery"-->
        几何查询
      </el-button>
      <el-button
        style="position:absolute;margin-left: 13em;"
        type="warning"
        plain
        size="small"
        @click="myClearGeometryQuery"
      >
        <!--@click="myClearGeometryQuery"-->
        清除 / 取消
      </el-button>
    </div>

    <!--距离查询-->
    <!--<div :class="{'layer-hide':distanceQueryPanelVisible}" style="margin-left: 45px; margin-top:60px;">
      <el-button
        style="position:absolute;margin-left: 1em;background-color: #1c84c6;"
        type="success"
        round
        icon="el-icon-search"

      >
       &lt;!&ndash; @click="distanceQuery"&ndash;&gt;
        距离查询
      </el-button>
      <el-button
        style="position:absolute;margin-left: 13em;"
        type="warning"
        plain
        size="small"

      >
       &lt;!&ndash; @click="myClearDistanceQuery"&ndash;&gt;
        清除 / 取消
      </el-button>
    </div>-->

    <!--缓冲区分析面板-->
    <div :class="{'layer-hide':bufferAnalystPanelVisible}" id="hcqfx" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
      <h3>缓冲区分析面板</h3>
      <!--缓冲半径：<input type="text" v-model="buffer_radius" />  &lt;!&ndash;:value="buffer_radius"&ndash;&gt;-->
      <label style="width: 54px;line-height: 17px">（单圈）缓冲半径:</label>
      <br />
      <input id="bufferRadius" type="range" min="100" max="100000" step="1" v-model="buffer_radius" />
      {{ this.buffer_radius}} m
      <br />  <br />
      <input id="bufferRadiusForMul" type="text" v-model="radiusStr" /> &nbsp; m
      <br /> <br />
      <input type="button" id="bufferOneRing" value="开始分析（单圈）"/>
      &nbsp;&nbsp;&nbsp;
      <input type="button" id="bufferMulRings" value="开始分析（多圈）"/>
      <br/>
    </div>

    <!--热力图分析面板-->
    <div :class="{'layer-hide':heatMapAnalystPanelVisible}" id="rlt" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
      <h3>热力图分析面板</h3>
      <label style="width: 54px;line-height: 17px">热力半径:</label><input id="radius" type="range" min="10" max="100" step="1" v-model="heatmap_radius" value="500" />   <!--value="10"-->
      {{ this.heatmap_radius}} m
      <!--热点半径：<input type="text" v-model="heatmap_radius" /> &lt;!&ndash;:value="heatmap_radius"&ndash;&gt;-->
      <br/>
      <label style="width: 54px;line-height: 17px">模糊半径:</label><input id="blur" type="range" min="10" max="100" step="1" v-model="heatmap_blur" />   <!--value="10"-->
      {{ this.heatmap_blur}} m
      <!--模糊尺寸：<input type="text" v-model="heatmap_blur" />  &lt;!&ndash;:value="heatmap_blur"&ndash;&gt;-->
      <br/> <br/>
      <input type="button" id="heatMapAnalyst" value="开始分析"/>
      &nbsp;&nbsp;&nbsp;
      <input type="button" id="heatMapClear" value="清除"/>
      <br/>
    </div>

    <!--聚类图显示-->
    <div :class="{'layer-hide':clusterLayerPanelVisible}" id="jlt" style="margin-left: 45px; margin-top:60px;">
      <el-button
        style="position:absolute;margin-left: 1em;background-color: #1c84c6;"
        type="success"
        round
        icon="el-icon-search"
        id="clusterLayerShow"
      >
        显示聚类图
      </el-button>
      <el-button
        style="position:absolute;margin-left: 13em;"
        type="warning"
        plain
        size="small"
        id="myClearClusterLayer"
      >
        清除
      </el-button>
    </div>

    <!-- 泰森多边形分析面板-->
    <div :class="{'layer-hide':thiessenAnalystPanelVisible}" id="tsdbx" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
      <h3>泰森多边形分析面板</h3>
      参数设置：<input type="text" value="10"/>
      <input type="button" id="thiessenAnalyst" value="开始分析"/>
      <br/>
    </div>

  </div>
</template>

<script>
 
  import 'ol/ol.css';
  import 'ol-ext/dist/ol-ext.css';
  import '../../assets/styles/my-ol-ext.css';

  import {Map,View,Overlay,Feature} from 'ol';
  import { Tile, Group, Image, Vector as lVector, VectorTile as lVectorTile, Heatmap as lHeatMap } from 'ol/layer'
  import {XYZ, Vector, Cluster} from 'ol/source'
  import { fromLonLat, toLonLat, get as projGet, getPointResolution } from 'ol/proj'
  import { GeoJSON } from 'ol/format'
  import {Draw,Select} from 'ol/interaction'
  import { Style, Fill, Stroke, Circle, Text, Circle as CircleStyle, Icon, RegularShape } from 'ol/style'
  import {defaults, Attribution, Zoom, ZoomSlider, ZoomToExtent, OverviewMap, ScaleLine, MousePosition} from 'ol/control';
  import { createStringXY } from 'ol/coordinate'
  import {Point,LineString,Polygon} from 'ol/geom'

  import Popup from 'ol-ext/overlay/Popup'
  import LayerSwitcher from 'ol-ext/control/LayerSwitcher'

  import { getArea, getLength } from 'ol/sphere'
  import { unByKey } from 'ol/Observable'
  

  export default {
    name:'MyGISMap',
    components: {
    },
    props: {
      mapCtrlTools:{
        type:Array,
        default:function () {
          return []
        }
      },
      lyrdata: {
        type: Array,
        default: []
      },
      mapParams: {
        type: Object,
        default: {}
      },
      spatialQueryConditions: {
        type: Array,        
        default: function () { 
          return []
        }
      },
      pn: {  //parent_name的简称，即告诉此子组件，当前访问的父组件是谁，以便响应不同的业务逻辑
        type: String,
        default: function () {  //设置成这样后，即使父组件不传值也不会造成影响
          return ''
        }
      },
    },
    data () {
        return {

          /**地图左上角-功能启动图标按钮-初始化控制**/  /*默认false不显示*/
          layerShow:false,//图层控制-功能启动图标按钮，
          //legendShow:false,//图例-功能启动图标按钮，默认false不显示
          measureShow:false,//测量工具-功能启动图标按钮，默认false不显示
          //hawkEyeShow:false,//鹰眼-功能启动图标按钮，默认false不显示
          decorateShow:false,//鹰眼-功能启动图标按钮，默认false不显示
          //juanlianShow:false,//卷帘-功能启动图标按钮，默认false不显示
          //regionShow:false,//区域选择树-功能启动图标按钮，默认false不显示
          //attrTableShow:false,//属性表格-功能启动图标按钮，默认false不显示
          //mapQueryShow:false,//地图查询-功能启动图标按钮，默认false不显示
          //modelBuildingShow:false,//模型构建与空间分析-功能启动图标按钮，默认false不显示
          //statisticalAnalysisShow:false,//统计分析-功能启动图标按钮，默认false不显示
          attrQueryPanelShow:false,//属性查询-功能启动图标按钮，默认false不显示
          geometryQueryPanelShow:false,//几何空间查询-功能启动图标按钮，默认false不显示
          distanceQueryPanelShow:false,//距离查询-功能启动图标按钮，默认false不显示
          bufferAnalystPanelShow:false,//缓冲区分析-功能启动图标按钮，默认false不显示
          thiessenAnalystPanelShow:false,//(数据集)泰森多边形分析-功能启动图标按钮，默认false不显示
          heatMapAnalystPanelShow:false,//热力图分析-功能启动图标按钮，默认false不显示
          clusterLayerPanelShow:false,//聚类图-功能启动图标按钮，默认false不显示

          /**地图各悬浮面板的可视状态**/ /*默认true为隐藏*/
          lyrPanelVisible:true,          
          measurePanelVisible:true, 
          decoratePanelVisible:true,
          attrQueryPanelVisible:true,
          geometryQueryPanelVisible:true,
          distanceQueryPanelVisible:true,
          bufferAnalystPanelVisible:true,
          thiessenAnalystPanelVisible:true,
          heatMapAnalystPanelVisible:true,
          clusterLayerPanelVisible:true, 
          
          coordinateShow: true, //2D坐标,默认false不显示
          scaleShow: true, //显示比例尺,默认false不显示
          
          /**图层选中显示红色小标志**/ /*默认false为隐藏*/
          layerFlag: false, //图层选中          
          measureFlag:false, //测量选中         
          decorateFlag:false, //整饰选中          
          attrQueryFlag:false, //属性查询-选中显示红色小标志
          geometryQueryFlag:false, //几何空间查询-选中显示红色小标志
          distanceQueryFlag:false, //距离查询-选中显示红色小标志，默认false为隐藏
          bufferAnalystFlag:false, //缓冲区分析-选中显示红色小标志，默认false为隐藏
          thiessenAnalystFlag:false, //(数据集)泰森多边形分析-选中显示红色小标志，默认false为隐藏
          heatMapAnalystFlag:false, //热力图分析-选中显示红色小标志，默认false为隐藏
          clusterLayerFlag:false, //聚类图-选中显示红色小标志，默认false为隐藏

          /**量测功能相关的**/
          measureVectorLayer:null,
          measureInteraction:null,
          measureSource:null,
          measureFeature:null,

          highLightLayer: {},//用于高亮的图层
          highLightVector: {},//highLightLayer图层的源
          highLightStyle: {},//highLightLayer图层的style

          /**（点要素）显示结果相关的**/
          location_blue:"",
          location_green:"",

          //属性查询数据
          options: [
            {
              value: '南康区',
              label: '南康区'
            }, {
              value: '赣县区',
              label: '赣县区'
            }, {
              value: '信丰县',
              label: '信丰县'
            }, {
              value: '大余县',
              label: '大余县'
            }, {
              value: '上犹县',
              label: '上犹县'
            }, {
              value: '崇义县',
              label: '崇义县'
            }, {
              value: '安远县',
              label: '安远县'
            }, {
              value: '龙南县',
              label: '龙南县'
            }, {
              value: '定南县',
              label: '定南县'
            }, {
              value: '全南县',
              label: '全南县'
            }, {
              value: '宁都县',
              label: '宁都县'
            }, {
              value: '于都县',
              label: '于都县'
            }, {
              value: '兴国县',
              label: '兴国县'
            }, {
              value: '会昌县',
              label: '会昌县'
            }, {
              value: '寻乌县',
              label: '寻乌县'
            }, {
              value: '石城县',
              label: '石城县'
            }, {
              value: '瑞金市',
              label: '瑞金市'
            }, {
              value: '章贡区',
              label: '章贡区'
            }
          ],

          options2:[
            {
              value: '土特产',
              label: '土特产'
            }, {
              value: '名菜',
              label: '名菜'
            }, {
              value: '小吃',
              label: '小吃'
            }
          ],
          value1: [],
          value2: [],

          attQueryConditions:"NAME like '%区%'",

          //热力图
          heatmap_radius: 45, //热力图-热点半径；默认45
          heatmap_blur: 70, //热力图-模糊尺寸；默认70

          //缓冲区分析
          buffer_radius:20000, //（单圈）缓冲半径，默认20000米
          radiusStr:'1000,5000,12000,20000', //（多圈）缓冲半径

          //地图量测
          drawSource: {},//图层数据源
          drawVector: {},//图层

        }
    },
    methods:{
      togglePanel(attr,attr2){
        this[attr] = !this[attr];
        this[attr2] = !this[attr2];
      },

      initMyMap(){
        let that = this;//以便在整个initMyMap方法体中的所有嵌套函数都能拿到thisVue

        //region定义Map和View
        var map = new Map({
          target: 'mapDiv',
          //controls: defaults({attribution: false, zoom: false, rotate: false}), //默认取消ol自带的控件显示
          view: new View({
            projection: this.mapParams.projection, //例如：'EPSG:4326', //发布的影像原始坐标系为4326，必须加上此投影才能显示发布的影像
            //center: this.mapParams.center, //纯用4326时
            center: fromLonLat(this.mapParams.center), //例如：[127.87535, 43.58279] 或 [126.47535, 43.58279],//地图初始中心点
            minZoom: this.mapParams.minZoom, //例如：5，//可以缩小的最小级别;若为undefined表示无限制
            maxZoom: this.mapParams.maxZoom, //例如：19，//可以放大的最大级别；若为undefined表示无限制
            zoom: this.mapParams.zoom, //例如：6，//地图初始化时显示级别；注意：若此处未定义，地图初始化显示不出来
          })
        });
        this.map = map;//把地图传出去，以便外面调用
        //endregion







        //region 统计专题图
        //let mIP,mPort,layerName,lyrIndex,resultIcon,layerTitle,mProj;
        let tjzttArr = that.MYCONFIG.themeChartMap[that.pn]; //有值，或undefined
            console.log(tjzttArr,"that.MYCONFIG.themeChartMap[that.pn]",86543);
        if(tjzttArr){
          tjzttArr.forEach(item=>{
            console.log(item,"that.MYCONFIG.themeChartMap[that.pn].item",901);

            //themeChartMap(item);//调用
            console.log(item.keyFieldArr[0],9011)
            console.log(item.keyFieldArr[1],9012)
            themeChartMap1();//调用
          });
        }

        function themeChartMap1(){

          //随机生成一个guid
          let guid = Math.floor(Math.random() * 10000000).toString()
          //初始化地图文档图层对象
          let mapDocLayer = new Zondy.Map.MapDocTileLayer('', 'gn_tjt', {
            ip: 'jlu3s.com',
            port: '7035',
            projection: 'EPSG:3857', //若不设置此属性，浏览器将被卡住并崩溃
            //文档guid
            guid: guid,
            title:"赣南各县区GDP-统计专题图",
          })
          //将地图文档图层加载到地图中
          map.addLayer(mapDocLayer);

          //专题图操作对象
          var ThemeOper
          //专题图信息数组
          var themesInfoArr = null
          //初始化专题图服务类
          ThemeOper = new Zondy.Service.ThemeOper(guid,null)
          //设置ip地址
          ThemeOper.ip = 'jlu3s.com'
          //设置端口号
          ThemeOper.port = '7035'

          /** 设置专题图默认参数*/
          function createThemesInfoArr() {
            //专题图信息数组
            var themesInfoArr = []
            //初始化Zondy.Object.Theme.ThemesInfo，用于设置需添加的专题相关信息
            themesInfoArr[0] = new Zondy.Object.Theme.ThemesInfo()
            //设置图层名层
            themesInfoArr[0].LayerName = '湖北省市级区划2'
            //初始化指定图层的专题图信息对象，之后再给该数组赋值
            themesInfoArr[0].ThemeArr = []
            //实例化CChartTheme类
            themesInfoArr[0].ThemeArr[0] = new Zondy.Object.Theme.CChartTheme()
            //专题图名称
            themesInfoArr[0].ThemeArr[0].Name = '统计专题图'
            themesInfoArr[0].ThemeArr[0].ChartType = Zondy.Object.Theme.CChartType.Bar3D
            //ChartThemeInfoArr设置
            //设置指定专题图的专题信息，专题图可以有多个专题信息
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr = []
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0] = new Zondy.Object.Theme.CChartThemeInfo()
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].Expression = 'gdp'
            //必须要填写,否则会出错dcserver会挂掉
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].Caption = 'gdp'
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].IsVisible = true
            //实例化CRegInfo类
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo = new Zondy.Object.Theme.CRegInfo()
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.Angle = 0
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.EndClr = 0
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.FillClr = 10
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.FillMode = 0
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.FullPatFlg = true
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.PatClr = 3
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.PatHeight = 5
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.PatWidth = 5
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.OutPenW = 1

            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1] = new Zondy.Object.Theme.CChartThemeInfo()
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].Expression = 'cz'
            //必须要填写,否则会出错dcserver会挂掉
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].Caption = 'cz'
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].IsVisible = true
            //实例化CRegInfo类
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo = new Zondy.Object.Theme.CRegInfo()
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.Angle = 0
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.EndClr = 0
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.FillClr = 11
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.FillMode = 0
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.FullPatFlg = true
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.PatClr = 10
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.PatHeight = 5
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.PatWidth = 5
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.OutPenW = 1

            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2] = new Zondy.Object.Theme.CChartThemeInfo()
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].Expression = 'GDP2014'
            // //必须要填写,否则会出错dcserver会挂掉
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].Caption = 'GDP2014'
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].IsVisible = true
            // //实例化CRegInfo类
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo = new Zondy.Object.Theme.CRegInfo()
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.Angle = 0
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.EndClr = 0
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.FillClr = 12
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.FillMode = 0
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.FullPatFlg = true
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.PatClr = 10
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.PatHeight = 5
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.PatWidth = 5
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.OutPenW = 1
            //RepresentInfo设置
            themesInfoArr[0].ThemeArr[0].RepresentInfo = new Zondy.Object.Theme.CChartThemeRepresentInfo()
            themesInfoArr[0].ThemeArr[0].RepresentInfo.AnnInfoLabel = new Zondy.Object.Theme.CAnnInfo()
            //标注(参数值)覆盖方式：覆盖
            themesInfoArr[0].ThemeArr[0].RepresentInfo.AnnInfoLabel.Ovprnt = true
            //小数位数
            themesInfoArr[0].ThemeArr[0].RepresentInfo.DigitLabel = 7
            //是否显示参数值
            themesInfoArr[0].ThemeArr[0].RepresentInfo.IsDrawLabel = true
            //参数值类型：真实值
            themesInfoArr[0].ThemeArr[0].RepresentInfo.FormatLabel = Zondy.Object.Theme.CChartLabelFormat.Value
            //直方图,折线图，点图属性设置
            //最大高度
            themesInfoArr[0].ThemeArr[0].RepresentInfo.MaxLength = 60
            //厚度
            themesInfoArr[0].ThemeArr[0].RepresentInfo.ThickPersent = 10
            //直方图中的宽度或折线图中的横向间隔
            themesInfoArr[0].ThemeArr[0].RepresentInfo.Width = 2
            //点图半径或折线图中的点半径
            themesInfoArr[0].ThemeArr[0].RepresentInfo.PlotRadius = 2
            //饼图属性设置
            //最小半径
            themesInfoArr[0].ThemeArr[0].RepresentInfo.MinRadius = 4
            //角度
            themesInfoArr[0].ThemeArr[0].RepresentInfo.PieTiltedAngle = 30
            //固定大小
            themesInfoArr[0].ThemeArr[0].RepresentInfo.PieSizeFixFlag = 1
            return themesInfoArr
          }

          addUniqueThemesInfo();//执行添加
          /** 添加专题图*/
          function addUniqueThemesInfo() {
            console.log(12)
            deleteTheme()
            themesInfoArr = createThemesInfoArr()
            console.log(themesInfoArr,121)
            //添加专题图（不是在原文档上添加，会重新生成一个专题图缓存文档）
            ThemeOper.addThemesInfo('gn_tjt', '0/0', themesInfoArr, onUniqueTheme)
          }

          /** 更新专题图*/
          function updateTheme() {
            if (themesInfoArr != null && themesInfoArr.length > 0) {
              var cType = Math.ceil(Math.random() * 7)
              themesInfoArr[0].ThemeArr[0].ChartType = cType
            }
            //更新专题图,onUniqueTheme为回调函数
            ThemeOper.updateThemesInfo('gn_local', '1/0', themesInfoArr, onUniqueTheme)
          }

          /** 删除专题图*/
          function deleteTheme() {
            if (themesInfoArr) {
              //删除专题图,onUniqueTheme为回调函数
              ThemeOper.removeThemesInfo('gn_local', '1/0', onUniqueTheme)
              themesInfoArr = null
            }
          }

          function onUniqueTheme(flg) {
            if (flg) {
              //刷新图层前要进行此设置。加载之前的缓存文档,保证专题图能正常显示
              mapDocLayer.options.keepCache = false
              //刷新图层，实时显示专题图
              mapDocLayer.refresh()
              //设置为读取缓存，以加快显示效率
              mapDocLayer.options.keepCache = true
            }
          }

        }

        function themeChartMap({mIP,mPort,layerName,lyrIndex,keyFieldArr,layerTitle,mProj}){
          //随机生成一个guid
          let guid = Math.floor(Math.random() * 10000000).toString()
          //初始化地图文档图层对象
          let mapDocLayer = new Zondy.Map.MapDocTileLayer('', layerName, {
            ip: mIP,
            port: mPort,
            projection: mProj, //若不设置此属性，浏览器将被卡住并崩溃
            //文档guid
            guid: guid,
            title:layerTitle,
          })
          //将地图文档图层加载到地图中
          map.addLayer(mapDocLayer);

          //专题图操作对象
          var ThemeOper
          //专题图信息数组
          var themesInfoArr = null
          //初始化专题图服务类
          ThemeOper = new Zondy.Service.ThemeOper(guid,null)
          //设置ip地址
          ThemeOper.ip = mIP
          //设置端口号
          ThemeOper.port = mPort

          /** 设置专题图默认参数*/
          function createThemesInfoArr() {
            //专题图信息数组
            var themesInfoArr = []
            //初始化Zondy.Object.Theme.ThemesInfo，用于设置需添加的专题相关信息
            themesInfoArr[0] = new Zondy.Object.Theme.ThemesInfo()
            //设置图层名层
            themesInfoArr[0].LayerName = layerTitle + '-统计专题图'
            //初始化指定图层的专题图信息对象，之后再给该数组赋值
            themesInfoArr[0].ThemeArr = []
            //实例化CChartTheme类
            themesInfoArr[0].ThemeArr[0] = new Zondy.Object.Theme.CChartTheme()
            //专题图名称
            themesInfoArr[0].ThemeArr[0].Name = '统计专题图'
            themesInfoArr[0].ThemeArr[0].ChartType = Zondy.Object.Theme.CChartType.Bar3D
            //ChartThemeInfoArr设置
            //设置指定专题图的专题信息，专题图可以有多个专题信息
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr = []
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0] = new Zondy.Object.Theme.CChartThemeInfo()
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].Expression = keyFieldArr[0]  // 'GDP亿'
            //必须要填写,否则会出错dcserver会挂掉
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].Caption =  keyFieldArr[0]  // 'GDP亿'
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].IsVisible = true
            //实例化CRegInfo类
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo = new Zondy.Object.Theme.CRegInfo()
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.Angle = 0
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.EndClr = 0
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.FillClr = 10
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.FillMode = 0
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.FullPatFlg = true
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.PatClr = 3
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.PatHeight = 5
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.PatWidth = 5
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[0].RegInfo.OutPenW = 1

            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1] = new Zondy.Object.Theme.CChartThemeInfo()
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].Expression =  keyFieldArr[1]  // 'GDP亿'
            //必须要填写,否则会出错dcserver会挂掉
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].Caption =  keyFieldArr[1]  // 'GDP亿'
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].IsVisible = true
            //实例化CRegInfo类
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo = new Zondy.Object.Theme.CRegInfo()
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.Angle = 0
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.EndClr = 0
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.FillClr = 11
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.FillMode = 0
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.FullPatFlg = true
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.PatClr = 10
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.PatHeight = 5
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.PatWidth = 5
            themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[1].RegInfo.OutPenW = 1

            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2] = new Zondy.Object.Theme.CChartThemeInfo()
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].Expression = 'GDP2014'
            // //必须要填写,否则会出错dcserver会挂掉
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].Caption = 'GDP2014'
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].IsVisible = true
            // //实例化CRegInfo类
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo = new Zondy.Object.Theme.CRegInfo()
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.Angle = 0
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.EndClr = 0
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.FillClr = 12
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.FillMode = 0
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.FullPatFlg = true
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.PatClr = 10
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.PatHeight = 5
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.PatWidth = 5
            // themesInfoArr[0].ThemeArr[0].ChartThemeInfoArr[2].RegInfo.OutPenW = 1
            //RepresentInfo设置
            themesInfoArr[0].ThemeArr[0].RepresentInfo = new Zondy.Object.Theme.CChartThemeRepresentInfo()
            themesInfoArr[0].ThemeArr[0].RepresentInfo.AnnInfoLabel = new Zondy.Object.Theme.CAnnInfo()
            //标注(参数值)覆盖方式：覆盖
            themesInfoArr[0].ThemeArr[0].RepresentInfo.AnnInfoLabel.Ovprnt = true
            //小数位数
            themesInfoArr[0].ThemeArr[0].RepresentInfo.DigitLabel = 7
            //是否显示参数值
            themesInfoArr[0].ThemeArr[0].RepresentInfo.IsDrawLabel = true
            //参数值类型：真实值
            themesInfoArr[0].ThemeArr[0].RepresentInfo.FormatLabel = Zondy.Object.Theme.CChartLabelFormat.Value
            //直方图,折线图，点图属性设置
            //最大高度
            themesInfoArr[0].ThemeArr[0].RepresentInfo.MaxLength = 60
            //厚度
            themesInfoArr[0].ThemeArr[0].RepresentInfo.ThickPersent = 10
            //直方图中的宽度或折线图中的横向间隔
            themesInfoArr[0].ThemeArr[0].RepresentInfo.Width = 2
            //点图半径或折线图中的点半径
            themesInfoArr[0].ThemeArr[0].RepresentInfo.PlotRadius = 2
            //饼图属性设置
            //最小半径
            themesInfoArr[0].ThemeArr[0].RepresentInfo.MinRadius = 4
            //角度
            themesInfoArr[0].ThemeArr[0].RepresentInfo.PieTiltedAngle = 30
            //固定大小
            themesInfoArr[0].ThemeArr[0].RepresentInfo.PieSizeFixFlag = 1
            return themesInfoArr
          }

          addUniqueThemesInfo();//执行添加
          /** 添加专题图*/
          function addUniqueThemesInfo() {
            deleteTheme()
            themesInfoArr = createThemesInfoArr()
            //添加专题图（不是在原文档上添加，会重新生成一个专题图缓存文档）
            ThemeOper.addThemesInfo(layerName, lyrIndex, themesInfoArr, onUniqueTheme)
          }

          /** 更新专题图*/
          function updateTheme() {
            if (themesInfoArr != null && themesInfoArr.length > 0) {
              var cType = Math.ceil(Math.random() * 7)
              themesInfoArr[0].ThemeArr[0].ChartType = cType
            }
            //更新专题图,onUniqueTheme为回调函数
            ThemeOper.updateThemesInfo(layerName, lyrIndex, themesInfoArr, onUniqueTheme)
          }

          /** 删除专题图*/
          function deleteTheme() {
            if (themesInfoArr) {
              //删除专题图,onUniqueTheme为回调函数
              ThemeOper.removeThemesInfo(layerName, lyrIndex, onUniqueTheme)
              themesInfoArr = null
            }
          }

          function onUniqueTheme(flg) {
            if (flg) {
              //刷新图层前要进行此设置。加载之前的缓存文档,保证专题图能正常显示
              mapDocLayer.options.keepCache = false
              //刷新图层，实时显示专题图
              mapDocLayer.refresh()
              //设置为读取缓存，以加快显示效率
              mapDocLayer.options.keepCache = true
            }
          }
        }//end of themeChatMap()
        //endregion







        //region自定义加载图层
        let lyrdata = this.lyrdata;        
        for (let i = 0, len = lyrdata.length; i < len; i++) {
          let tmpLyrs = this.addLayerAtInit(lyrdata[i]);
          tmpLyrs.forEach(value => {            
            this.map.addLayer(value);
          }) //end fo forEach
        } //end of for
        //endregion






        //region地图控件
        /*集中调用*/
        addZoomControl();
        addZoomExtentControl();
        addMousePositionControl();
        addScaleControl();
        addEagleViewControl();

        //缩放控件
        function addZoomControl() {
          if (map != null) {
            var zoom = new Zoom()
            map.addControl(zoom)
          }
        }
        //地图复位
        function addZoomExtentControl() {
          if (map != null) {
            var zoomToExtent = new ZoomToExtent({
              /*extent: [13100000, 4290000,
                13200000, 5210000],*/
              extent:that.mapParams.myZoomExtent,
            })
            map.addControl(zoomToExtent)
          }
        }

        //添加坐标
        function addMousePositionControl() {
          if (map != null) {
            var mousePositionControl = new MousePosition({
              //坐标格式
              coordinateFormat: createStringXY(5),//坐标小数位数
              //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
              projection: 'EPSG:4326',
              //坐标信息显示样式类名，默认是'ol-mouse-position'
              className: 'custom-mouse-position',
              //显示鼠标位置信息的目标容器
              target: document.getElementById('mouse-position'),
              //未定义坐标的标记
              undefinedHTML: '&nbsp;',
            })
            map.addControl(mousePositionControl)
          }
        }

        //比例尺控件
        function addScaleControl() {
          if (map != null) {
            //实例化比例尺控件（ScaleLine）
            var scaleLineControl = new ScaleLine({
              //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
              units: 'metric',
              target: 'scaleBar',
              className: 'ol-scale-line'
            })
            map.addControl(scaleLineControl)
          }
        }

        //鹰眼快视
        function addEagleViewControl() {
          const tdk = '35b6d71d2630c03a174e26641b34ddc9';//天地图数据服务Key
          let TiandiMap_img,TiandiMap_imgcia;
          if (map != null) {
            TiandiMap_img = new Tile({
              name: '天地图影像图层',
              visible: true, //图层不可见
              source: new XYZ({
                url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + tdk,
                wrapX: false,
              }),
            })
            TiandiMap_imgcia = new Tile({
              name: '天地图影像注记图层',
              visible: true, //图层不可见
              source: new XYZ({
                url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + tdk,
                wrapX: false,
              }),
            })           
            //实例化鹰眼控件（OverviewMap）,自定义样式的鹰眼控件
            var overviewMapControl = new OverviewMap({
              //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
              className: 'ol-overviewmap ol-custom-overviewmap',
              //鹰眼中加载同坐标系下不同数据源的图层
              layers: [TiandiMap_img, TiandiMap_imgcia],
              //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
              collapseLabel: '\u00BB',
              //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
              label: '\u00AB',
              //初始为展开显示方式
              collapsed: true, //true为默认折叠
              view: new View({ 
                projection: 'EPSG:3857',
                multiWorld: true
              }),
            })
            map.addControl(overviewMapControl)
          }
        }
        //endregion

        //region图层管理控件
        if (!document.body.classList.contains('hideOpacity')) {
          document.body.classList.add('hideOpacity')
          document.body.classList.add('hidePercent')
        }
        let lyrs = [];
        let switcher = new LayerSwitcher({
          target: document.querySelector('#' + this.lyrBox),
          show_progress: true, //在切片图层上显示进度条，默认为false
          reordering: true, //允许图层重新排序，默认值为true
          trash: false, //添加垃圾桶按钮以删除图层，默认为false
          extent: true, //添加范围按钮以缩放到图层范围
        })        
        //提示信息
        switcher.tip = {
          up: '上下移动改变图层叠加顺序[up/down]',
          down: '往下[down]',
          info: '图层相关信息说明[informations...]',
          extent: '跳转到该图层最大范围[zoom to extent]',
          trash: '移除该图层[remove layer]',
          plus: '展开/收缩图层组[expand/shrink]'
        }
        map.addControl(switcher)
        //endregion 图层管理控件






        //region信息窗口相关
        //（基于ext的popup)
        let popup = new Popup (
          {	popupClass: "default", //"tooltips", "warning" "black" "default", "tips", "shadow","anim"
            closeBox: true,
            onshow: function(){ console.log("You opened the box"); },
            onclose: function(){ console.log("You close the box"); },
            positioning: 'auto',
            autoPan: true,
            autoPanAnimation: { duration: 750 }
          });
        map.addOverlay(popup); //一定要加到地图上，否则不显示

        let featurePics = this.MYCONFIG.featurePics;
        
        let spatialQueryConditions = that.MYCONFIG.spatialQueryConditions[that.pn]; //有值，或undefined
        //////console.log("spatialQueryConditions:",spatialQueryConditions,676)

        function getHtml(features) {
          //创建属性框
          let html = '';
          html += `<div class="ol-popupfeature">`;
          html += `<table>`;
          html += `<tr><th>属性名称</th><th>属性值</th></tr>`;

          let f = features.values_; //注：Zondy返回的feature多包了一层value_【相当于value_.value_后才能拿到字段的值】，所以此处多访问一层

          //console.log(f,20)

          //遍历各属性字段信息并放置到表格中
          for (const key in f.values_) {
            if (f.values_.hasOwnProperty(key)
              && key != 'geometry'
              // && key != 'SmID'
              // && key != 'SmUserID'
              && key != 'the_geom'
              && key != 'PopupInfo'
              && key != 'imgSrc'   //之前自定义
              && key != 'UserID'  //Zondy
              && key != 'mpLayer'  //Zondy
            ) {
              const element = f.values_[key];
              if (element) {
                html += `<tr><td>${key}</td><td>${element}</td></tr>`;
              }
            }
          }

          //检测是否含有图片，若有则输出为html格式内容以便后续插入信息窗口中
          let picsDiv;
          let imgSrcStr;
          //根据imgSrc属性字段的值来获取相关图片地址
          /*imgSrcStr = f.values_["imgSrc"];
          if(f.values_.values_.hasOwnProperty("imgSrc")){
            //imgSrcStr = f.values_["imgSrc"];
          }*/
          /*if(imgSrcStr){
            console.log("→优先使用方法1：属性直接读取图片地址法!!")
            let imgSrcArr = imgSrcStr.split('**');
            picsDiv = buildPicDivForFeature(imgSrcArr);
          }else*/
              if(spatialQueryConditions){
            console.log("→使用方法2：配置信息读取图片地址法")
            picsDiv = getPicsDivFromSpatialQueryConditions(f);
          }
          //如果有图片则把图片罗列出来
          if(picsDiv){
            html += picsDiv;
          }
          html += `</table>`;
          html += `</div>`;
          return html;
        } //end of getHtml()

        //（方法1）根据某要素图形所含的图片地址数组构建图片Div
        function buildPicDivForFeature(imgSrcArr){
          let picsDiv = "";
          imgSrcArr.forEach(item => {
            if(item){
              picsDiv += "<a href='" + item + "' target='_blank' style='display:inline-block;margin:10px;'><img src='" + item + "' width='120px;' height='90px;'></a>";
            }
          });
          picsDiv = "<tr>" +
            "<td  colspan='2'>" + picsDiv + "</td>" +
            "</tr>";
          return picsDiv;
        }

        //（方法2）根据SpatialQueryConditions来构建图片Div
        function getPicsDivFromSpatialQueryConditions(features){
          let myPicsDiv;
          spatialQueryConditions.forEach(item=>{
            //console.log("spatialQueryConditions的值为",item,87654321)
            if(item.keyField1 && item.keyField2 ){
              //console.log(features.values_,217)
              myPicsDiv = whichFeatureHasPics(features.values_[item.keyField1],features.values_[item.keyField2]); //此处前面要承接picsDiv,否则图片出不来
            }
          });
          return myPicsDiv;
        }

        function whichFeatureHasPics(ags1,ags2){
          let picsDiv = "";
          /*注意，这里的featurePics输入全局变量引入了*/
          featurePics.forEach(item => {
            if (item[0] == ags1 && item[1] == ags2 ) { //经过测试，此处暂时不能用===恒等
              item[2].forEach(arr => {
                picsDiv += "<a href='" + arr + "' target='_blank' style='display:inline-block;margin:10px;'><img src='" + arr + "' width='120px;' height='90px;'></a>";
              });
            }
          });
          picsDiv = "<tr>" +
            "<td  colspan='2'>" + picsDiv + "</td>" +
            "</tr>";
          return picsDiv;
        }

        //移除信息窗口
        function removePopup() {
          popup.setPosition(undefined);
        }
        //图层信息框内容更新
        function updateInfoView(feature) {
          if (!feature && popup) {
            removePopup();
            return;
          }
          if(feature){

            let html = getHtml(feature);
                 
            popup.show(getCenterPointFromExtent(feature.getGeometry().getExtent()), html);

            function getCenterPointFromExtent(extentArr){
               let x = (extentArr[0] + extentArr[2])/2;
               let y = (extentArr[1] + extentArr[3])/2;
               return [x,y];
            }
          }
        } //end of updateInfoView()


        let sqcArr = that.MYCONFIG.spatialQueryConditions[that.pn]; //有值，或undefined
        if(sqcArr){
          sqcArr.forEach(item=>{
            map.on(item.mouseEventType, mouseEventLinstener);
          });
        }

        //（监听）地图单击、双击、悬浮等的全局事件
        //map.on('click', mouseEventLinstener); //map.on('pointermove', pointermoveLinstener);
        function mouseEventLinstener(e) {
          map.forEachFeatureAtPixel(e.pixel, function (feature,layer) {
              console.log(layer,212)
            if(layer){
              updateInfoView(feature);
            }
          });
        }
        //endregion







        //region缓冲区分析（单圈+多圈）
        let hcqfxArr = that.MYCONFIG.bufferAnalysis[that.pn]; //有值，或undefined
          //console.log(hcqfxArr,"that.MYCONFIG.bufferAnalysis[that.pn]",32123);
        if(hcqfxArr){
          hcqfxArr.forEach(item=>{
              bufferAnalysis(item);//目前只支持一个页面只进行一个图层的缓冲区分析
          });
        }

        function  bufferAnalysis({bufferResultBaseUrl,mIP,mPort,leftRad,rightRad,radiusStr,srcInfo,singleResultPrefix,mulResultPrefix,mExtent}){
          //var bufferResultBaseUrl = 'gdbp://MapGisLocal/OpenLayerVecterMap/sfcls/' //缓存结果图层的基地址
          //var bufferResultBaseUrl = 'gdbp://MapGisLocal/KJ_ZHONG/sfcls/' //缓存结果图层的基地址
          //var bufferResultBaseUrl = 'gdbp://MapGisLocal/TempAnalysisRusult/sfcls/' //缓存结果图层的基地址
          let bufferResultLayerArr = new Array()


          document.getElementById("bufferOneRing").addEventListener("click", function(){
            console.log("（单圈）缓冲区分析");
            bufferOneRing(); //调用
          });
          document.getElementById("bufferMulRings").addEventListener("click", function(){
            console.log("（多圈）缓冲区分析");
            bufferMulRings(); //调用
          });          

          //执行单圈缓冲区分析
          function bufferOneRing() {
            //显示进度条
            startPressBar();
            var clsBufBySR = new Zondy.Service.ClassBufferBySingleRing({              
              ip: mIP,             
              port: mPort, 
              //缓冲时要素左侧缓冲半径
              //leftRad: 10000,
              leftRad: that.buffer_radius,
              //缓冲时要素右侧缓冲半径
              //rightRad: 10000,
              rightRad: that.buffer_radius,
              //不允许根据属性字段设置缓冲区半径
              isByAtt: false,
            })

            //clsBufBySR.srcInfo = 'gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界河流'
            //clsBufBySR.srcInfo = 'gdbp://MapGisLocal/KJ_ZHONG/sfcls/赣南名菜'
            clsBufBySR.srcInfo = srcInfo


            //var resultname = 'singleBuffAnalysisResultLayer' + getCurentTime()
            var resultname = singleResultPrefix + getCurentTime()
            clsBufBySR.desInfo = bufferResultBaseUrl + resultname

            //调用基类Zondy.Service.AnalysisBase的execute方法执行类缓冲分析，AnalysisSuccess为回调函数
            clsBufBySR.execute(AnalysisSuccess, 'post', false, 'json', () => {
            })
          } //end of bufferOneRing()

          function bufferMulRings() {
            //显示进度条
            startPressBar();
            var clsBufByMR = new Zondy.Service.ClassBufferByMultiplyRing({             
              ip: mIP,
              port: mPort, //访问IGServer的端口号，.net版为6163，Java版为8089,
              //多圈缓冲分析各圈的缓冲半径
              //radiusStr: '0.01,0.05,0.1', //主要针对经纬度
              //radiusStr: '1000,5000,10000', //针对投影米坐标
              radiusStr: that.radiusStr, //针对投影米坐标
            })
            //调用Zondy.Service.ClassBufferBase基类公共属性
            //clsBufByMR.srcInfo = 'gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界河流'
            //clsBufByMR.srcInfo = 'gdbp://MapGisLocal/KJ_ZHONG/sfcls/赣南名菜'
            clsBufByMR.srcInfo = srcInfo

            //var resultname = 'multiBuffAnalysisResultLayer' + getCurentTime()
            var resultname = mulResultPrefix + getCurentTime()
            clsBufByMR.desInfo = bufferResultBaseUrl + resultname
            //调用基类Zondy.Service.AnalysisBase的execute方法执行类缓冲分析，AnalysisSuccess为回调函数
            clsBufByMR.execute(AnalysisSuccess, 'post', false, 'json', () => {
            })
          } //end of bufferMulRings()

          //分析成功后的回调
          function AnalysisSuccess(data) {
            //停止进度条
            stopPressBar();
            if (!data.results) {
              alert('缓冲失败，请检查参数！')
            } else {
              if (data.results.length != 0) {
                var resultLayerUrl = data.results[0].Value || data.results[0].value
                //将结果图层添加到地图视图中显示
                //var resultLayer = new Zondy.Map.GdbpLayer('MapGIS IGS BuffAnalyResultLayer', [bufferResultBaseUrl + resultLayerUrl], {
                var resultLayer = new Zondy.Map.GdbpLayer('MapGIS IGS BuffAnalyResultLayer', [resultLayerUrl], {
                  //ip: 'develop.smaryun.com',
                  //port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089,
                  ip: mIP,
                  port: mPort, //访问IGServer的端口号，.net版为6163，Java版为8089,
                  //extent:[12680206.554277513,2812952.111504088,12984878.80503216,3141822.257129459],
                  extent:mExtent,
                  isBaseLayer: false,
                  title:"缓冲区分析结果图层",
                });
                map.addLayer(resultLayer)
                bufferResultLayerArr.push(resultLayer)
              }
            }
          }


          function deleteAll() {
            while (bufferResultLayerArr.length > 0) {
              map.removeLayer(bufferResultLayerArr.pop())
            }
          }

          function getCurentTime() {
            var now = new Date()
            //获取当前年份
            var year = now.getFullYear()
            //获取当前月份
            var month = now.getMonth() + 1
            //获取当前日期
            var day = now.getDate()
            //获取当前时刻
            var hh = now.getHours()
            //获取当前分钟
            var mm = now.getMinutes()
            //获取当前秒钟
            var ss = now.getSeconds()
            //将当前的日期拼串
            var clock = year + '-'
            if (month < 10) clock += '0'
            clock += month + '-'
            if (day < 10) clock += '0'
            clock += day + '-'
            if (hh < 10) clock += '0'
            clock += hh
            if (mm < 10) clock += '0'
            clock += mm
            if (ss < 10) clock += '0'
            clock += ss
            return clock
          }
        } //end of bufferAnalysis()

        //endregion






        //region进度条
        //停止进度条
        function stopPressBar() {
          document.getElementById("preview").style.display = "none";
        }

        //开始进度条动画
        function startPressBar() {
          document.getElementById("preview").style.display = "block";
        }
        //endregion






        //region热力图
        let heatLayer = null;
        //heatLayer.setRadius(parseInt(that.heatmap_radius, 10));
        //heatLayer.setBlur(parseInt(that.heatmap_blur, 10));
        // var eathquake = {
        //   "data": [
        //     {
        //       "magnitude": 5.9,
        //       "coordinates": [
        //         [-56.072, -60.975], [165.778, -46.686], [-177.386, -29.43], [157.837, -58.312], [-178.549, -17.968],
        //         [-84.121, 9.183], [120.891, 22.661], [81.307, 39.383], [-175.702, -14.621], [89.441, 2.199], [93.821, 3.269],
        //         [-112.587, -28.73], [143.311, 39.665], [142.082, 41.335], [139.536, -50.352], [-175.976, -19.962],
        //         [-63.555, -22.059], [106.371, -7.692], [122.248, 24.572], [119.563, 15.593], [-128.893, -55.661],
        //         [-178.508, -20.872], [173.789, -19.19], [-92.294, 14.191], [178.062, -16.02], [142.913, 42.419],
        //         [155.75, 49.247], [143.218, 11.838], [-109.574, 25.127], [144.006, -54.217], [139.251, 29.057],
        //         [148.27, -3.109], [-172.32, -18.381], [-71.868, -33.939], [-63.571, -22.742], [145.562, -3.423],
        //         [-104.495, -4.178], [-73.255, -35.783]
        //       ]
        //     },
        //     {
        //       "magnitude": 5.8,
        //       "coordinates": [[121.156, 19.202], [126.829, -0.877], [-174.035, -20.536], [123.08, 9.821], [141.386, 36.214],
        //         [-127.518, 43.625], [65.405, -17.839], [125.633, 10.037], [-107.644, -34.905], [-13.972, -1.261],
        //         [91.748, 1.271], [89.685, 1.841], [105.457, -6.81], [121.855, -2.64], [21.475, 36.632],
        //         [93.36, 2.158], [140.349, 35.596], [143.836, -54.565], [-70.562, -25.729], [-179.61, -22.13],
        //         [11.086, 44.851], [133.269, -0.72], [-176.34, -20.192], [-9.663, -24.747], [151.665, 45.452],
        //         [156.132, 49.354], [-178.358, -21.15], [-98.905, -36.429], [128.697, 2.645], [123.875, 6.61],
        //         [157.456, -8.838], [156.048, -7.145], [171.691, -22.312], [95.832, 22.72], [-150.76, 61.237],
        //         [59.571, 33.506], [-178.186, -15.307]
        //       ]
        //     },
        //   ]
        // };

        let nonganData = that.MYCONFIG.nonganData
        let attrStr = "type";
        //let attrStr = "city";
        //let attrStr = "magnitude";
        //console.log(eathquake,112)
        //console.log(eathquake.data[0].magnitude,1121)


        document.getElementById("heatMapAnalyst").addEventListener("click", function() {
          console.log("开始热力图分析");
          if(heatLayer) map.removeLayer(heatLayer);
          heatLayer = createHeatmapLayer(nonganData.data,parseInt(that.heatmap_blur, 10),parseInt(that.heatmap_radius, 10));
          map.addLayer(heatLayer);
        });

        document.getElementById("heatMapClear").addEventListener("click", function() {
          console.log("清除热力图");
          if(heatLayer) map.removeLayer(heatLayer);
        });

        function createHeatmapLayer (data, blur, radius){
          let source = new Vector({wrapX:false})
          let features = []
          for (let i in data) {
            //var att = parseFloat(data[i].magnitude) ;
            var att = parseFloat(data[i][attrStr]) ; console.log(att,257)
            for(let j in data[i].coordinates)
            {
              let newFeature = createFeature([parseFloat(data[i].coordinates[j][0]),parseFloat(data[i].coordinates[j][1])],att);
              features.push(newFeature)
            }
          }
          source.addFeatures(features)
          //创建热力图层
          let HeatmapLayer = new lHeatMap({
            title:"生成的热力图",
            source,
            blur,
            radius,
            weight:'weight'  //默认热力图层权值字段（0-1）
          });
          return HeatmapLayer
        }

        function createFeature (coordinates,att) {
          let tFeature =new Feature({
            //geometry: new ol.geom["Point"](coordinates)
            geometry: new Point(coordinates)
          });
          tFeature.set('weight', att - 5);
          return tFeature;
        }
        //endregion







        //region聚类图
        var clusterLayer  = null;
        var ia = null;
        // var eathquake2 = {
        //   "data": [
        //     {
        //       "magnitude": 5.9,
        //       "coordinates": [
        //         [-56.072, -60.975], [165.778, -46.686], [-177.386, -29.43], [157.837, -58.312], [-178.549, -17.968],
        //         [-84.121, 9.183], [120.891, 22.661], [81.307, 39.383], [-175.702, -14.621], [89.441, 2.199], [93.821, 3.269],
        //         [-112.587, -28.73], [143.311, 39.665], [142.082, 41.335], [139.536, -50.352], [-175.976, -19.962],
        //         [-63.555, -22.059], [106.371, -7.692], [122.248, 24.572], [119.563, 15.593], [-128.893, -55.661],
        //         [-178.508, -20.872], [173.789, -19.19], [-92.294, 14.191], [178.062, -16.02], [142.913, 42.419],
        //         [155.75, 49.247], [143.218, 11.838], [-109.574, 25.127], [144.006, -54.217], [139.251, 29.057],
        //         [148.27, -3.109], [-172.32, -18.381], [-71.868, -33.939], [-63.571, -22.742], [145.562, -3.423],
        //         [-104.495, -4.178], [-73.255, -35.783]
        //       ]
        //     },
        //     {
        //       "magnitude": 5.8,
        //       "coordinates": [[121.156, 19.202], [126.829, -0.877], [-174.035, -20.536], [123.08, 9.821], [141.386, 36.214],
        //         [-127.518, 43.625], [65.405, -17.839], [125.633, 10.037], [-107.644, -34.905], [-13.972, -1.261],
        //         [91.748, 1.271], [89.685, 1.841], [105.457, -6.81], [121.855, -2.64], [21.475, 36.632],
        //         [93.36, 2.158], [140.349, 35.596], [143.836, -54.565], [-70.562, -25.729], [-179.61, -22.13],
        //         [11.086, 44.851], [133.269, -0.72], [-176.34, -20.192], [-9.663, -24.747], [151.665, 45.452],
        //         [156.132, 49.354], [-178.358, -21.15], [-98.905, -36.429], [128.697, 2.645], [123.875, 6.61],
        //         [157.456, -8.838], [156.048, -7.145], [171.691, -22.312], [95.832, 22.72], [-150.76, 61.237],
        //         [59.571, 33.506], [-178.186, -15.307]
        //       ]
        //     },
        //   ]
        // };
        
        //let attrStr2 = "magnitude";
        let attrStr2 = "type";

        document.getElementById("clusterLayerShow").addEventListener("click", function() {
          console.log("显示聚类图");
          if(clusterLayer) map.removeLayer(clusterLayer);
          clusterLayer  = createClusterLayer(nonganData.data);
          map.addLayer(clusterLayer);

          ia =new Select({
            condition: function(evt) {
              return evt.type == 'singleclick' || evt.type == 'pointermove';
            },
            style: selectStyleFunction,
            layers:[clusterLayer],
            wrapX:false
          });
          map.addInteraction(ia);
        });

        document.getElementById("myClearClusterLayer").addEventListener("click", function() {
          console.log("关闭聚类图");
          if(clusterLayer) map.removeLayer(clusterLayer);
          if(ia) map.removeInteraction(ia);
        });


        function createClusterLayer (data){
          var vectorSource = new Vector({wrapX:false})
          var features = []
          for (var i in data) {
            //var att = parseFloat(data[i].magnitude) ;
            var att = parseFloat(data[i][attrStr2]) ;
            for(var j in data[i].coordinates)
            {
              var newFeature = createFeature([parseFloat(data[i].coordinates[j][0]),parseFloat(data[i].coordinates[j][1])],att);
              features.push(newFeature)
            }

          }
          vectorSource.addFeatures(features)
          var clusterLayer = new lVector({
            title:"聚类图图层",
            source:new Cluster({
              distance:40,   //最近的聚合图元距离(单位:像素)
              source:vectorSource,
              wrapX:false
            }),
            style:styleFunction
          });
          return clusterLayer
        }

        function createFeature (coordinates,att) {
          var tFeature =new Feature({
            //geometry: new ol.geom["Point"](coordinates)
            geometry: new Point(coordinates)
          });
          tFeature.set('weight', att);
          return tFeature;
        }
        var maxFeatureCount = 0;
        function getMaxFeatureCount()
        {
          var features = clusterLayer.getSource().getFeatures();
          var feature, radius;
          for (var i = features.length - 1; i >= 0; --i) {
            feature = features[i];
            var originalFeatures = feature.get('features');
            maxFeatureCount = Math.max(maxFeatureCount, originalFeatures.length);
          }
        }
        function styleFunction(feature, resolution) {
          var style;
          var size = feature.get('features').length;
          getMaxFeatureCount();
          if (size > 1) {
            style = new Style({
              image: new Circle({
                radius: 10+(size/maxFeatureCount)*10,
                fill: new Fill({
                  color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
                })
              }),
              text: new Text({
                text: size.toString(),
                fill: new Fill({
                  color: '#fff'
                }),
                stroke: new Stroke({
                  color: 'rgba(0, 0, 0, 0.6)',
                  width: 3
                })
              })
            });
          } else {
            var originalFeature = feature.get('features')[0];
            style = new Style({
              geometry: originalFeature.getGeometry(),
              image: new RegularShape({
                radius1: 8+(parseFloat(originalFeature.get('weight'))-5)*10,
                radius2: 6,
                points: 5,
                angle: 0,
                fill: new Fill({
                  color: 'rgba(0, 250, 0, 0.8)'
                }),
                stroke: new Stroke({
                  color: 'rgba(255, 204, 0, 0.2)',
                  width: 1
                })
              })
            });
          }
          return style;
        }

        function selectStyleFunction(feature) {
          var size = feature.get('features').length;
          getMaxFeatureCount();
          var styles = [new Style({
            image: new Circle({
              radius: 10+(size/maxFeatureCount)*10,
              fill: new Fill({
                color: 'rgba(255, 255, 255, 0.01)'
              })
            })
          })
          ];
          var originalFeatures = feature.get('features');
          for (var i = originalFeatures.length - 1; i >= 0; --i) {
            let originalFeature = originalFeatures[i];
            styles.push(
              new Style({
                geometry: originalFeature.getGeometry(),
                image: new RegularShape({
                  radius1: 8+(parseFloat(originalFeature.get('weight'))-5)*10,
                  radius2: 6,
                  points: 5,
                  angle: 0,
                  fill: new Fill({
                    //color: 'rgba(0, 0, 205, 0.8)'
                    color: 'rgba(255, 0, 205, 0.8)' //紫红色
                  }),
                  stroke: new Stroke({
                    color: 'rgba(255, 204, 0, 0.2)',
                    width: 1
                  })
                })
              })
            );
          }
          return styles;
        }
        //endregion








        //region 地图测量功能
        //定义“测量”和“勾绘”过程中用到的临时工作矢量层
        that.drawSource = new Vector() //图层数据源
        that.drawVector = new lVector({
          title: '临时工作图层（绘制图形用）', //在图层面板中显示
          source: that.drawSource,
          //displayInLayerSwitcher:false,//设为false可以让此图层不显示在图层管理面板中
          style: new Style({
            //图层样式
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)' //填充颜色
            }),
            stroke: new Stroke({
              color: '#ffcc33', //边框颜色
              width: 2 // 边框宽度
            }),
            image: new Circle({
              radius: 7,
              fill: new Fill({
                color: '#ffcc33'
              })
            })
          })
        })

        //measure();
        //function measure() {
          //let that = this;
          //region 测量功能
          //OpenLayer5中已封装好与椭球相关的getLength和getArea方法
          //let wgs84Sphere = new ol.Sphere(6378137); //定义一个球对象
          let sketch//当前绘制的要素
          let helpTooltipElement//帮助提示框对象
          let helpTooltip//帮助提示框显示的信息
          let measureTooltipElement//测量工具提示框对象
          let measureTooltip//测量工具中显示的测量值
          let continuePolygonMsg = '继续点击绘制多边形'//当用户正在绘制多边形时的提示信息文本
          let continueLineMsg = '继续点击绘制线'//当用户正在绘制线时的提示信息文本
          let pointerMoveHandler = function (evt) {//鼠标移动事件处理函数
            if (evt.dragging) {
              return
            }
            /** @type {string} */
            let helpMsg = '点击开始绘制' //当前默认提示信息
            //判断绘制几何类型设置相应的帮助提示信息
            if (sketch) {
              let geom = sketch.getGeometry()
              if (geom instanceof Polygon) helpMsg = continuePolygonMsg //绘制多边形时提示相应内容
              else if (geom instanceof LineString) helpMsg = continueLineMsg //绘制线时提示相应内容
            }
            helpTooltipElement.innerHTML = helpMsg //将提示信息设置到对话框中显示
            helpTooltip.setPosition(evt.coordinate) //设置帮助提示框的位置
          }
          //鼠标移动与动态帮助提示
          function mapPointMove() {
            map.on('pointermove', pointerMoveHandler) //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
          }

          let typeSelect = 'area' //全局变量，默认值为‘area’测面
          let distanceDiv = document.getElementById('myMeasureDistance') //测量类型对象-距离
          let areaDiv = document.getElementById('myMeasureArea') //测量类型对象-面积
          let draw //全局变量，以便后续移除

          //点击测距离
          //bus.$on('myMeasureDistance', function () {
          document.getElementById("myMeasureDistance").addEventListener("click", function(){
              console.log("（距离）量测");
              that.map.removeLayer(that.drawVector) //先移除再添加，否则控制台报错
              that.map.addLayer(that.drawVector)
              that.map.removeInteraction(draw) //移除绘制图形
              typeSelect = 'distance'
              addInteraction() //添加绘图进行测量
              mapPointMove() //鼠标移动与动态帮助提示
            }.bind(this)
          ) //监听量测中“距离”按钮的点击事件 by qhy

          //点击测面积
          //bus.$on('myMeasureArea', function () {
          document.getElementById("myMeasureArea").addEventListener("click", function(){
              console.log("（面积）量测");
              that.map.removeLayer(that.drawVector)
              that.map.addLayer(that.drawVector)
              that.map.removeInteraction(draw) //移除绘制图形
              typeSelect = 'area'
              addInteraction() //添加绘图进行测量
              mapPointMove() //鼠标移动与动态帮助提示
            }.bind(this)
          ) //监听量测中“面积”按钮的点击事件 by qhy

          //点击“清除”量测结果
          //bus.$on('myClearMeasure', function () {
          document.getElementById("myClearMeasure").addEventListener("click", function(){
              console.log("（清除）量测");
              if (draw) {
                draw.setActive(false) //取消激活状态，以便退出绘制
              }
              let ols = that.map.getOverlays()
              ols.clear() //把所有覆盖物（测量结果）都清楚掉
              that.map.removeLayer(that.drawVector) //把vector图层也清除掉，从而清除测量图形
              //注：此处不能通过var定义局部变量，会导致全局vector调用局部source而报错
              that.drawSource = null //先清空全局变量source
              that.drawSource = new Vector() //再实例化一个矢量图层给全局变量source，从而消除上次测量残留
              that.drawVector.setSource(that.drawSource) //更新vector的新源，避免本次量测残留图形对后续新量测的影响

            }.bind(this)
          ) //监听量测中“清除”按钮的点击事件 by qhy

          /**
           * 加载交互绘制控件函数
           */
          function addInteraction() {
            let type = typeSelect == 'area' ? 'Polygon' : 'LineString'
            draw = new Draw({
              source: that.drawSource, //测量绘制层数据源
              type: /** @type {ol.geom.GeometryType} */ (type), //几何图形类型
              style: new Style({
                //绘制几何图形的样式
                fill: new Fill({
                  color: 'rgba(255, 255, 0, 0.2)' //浅黄色
                }),
                stroke: new Stroke({
                  color: 'rgba(255, 255, 0, 0.7)', //黄色
                  lineDash: [10, 10],
                  width: 2
                }),
                image: new Circle({
                  radius: 5,
                  stroke: new Stroke({
                    color: 'rgba(0, 0, 0, 0.7)' //黑色
                  }),
                  fill: new Fill({
                    color: 'rgba(255, 0, 255, 0.5)' //紫红色
                  })
                })
              })
            })
            that.map.addInteraction(draw)

            createMeasureTooltip() //创建测量工具提示框
            createHelpTooltip() //创建帮助提示框

            let listener
            //绑定交互绘制工具开始绘制的事件
            draw.on('drawstart', function (evt) {
                // set sketch
                sketch = evt.feature //绘制的要素

                /** @type {ol.Coordinate|undefined} */
                let tooltipCoord = evt.coordinate // 绘制的坐标
                //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
                listener = sketch.getGeometry().on('change', function (evt) {
                  let geom = evt.target //绘制几何要素
                  let output
                  if (geom instanceof Polygon) {
                    output = formatArea(/** @type {ol.geom.Polygon} */(geom)) //面积值
                    tooltipCoord = geom.getInteriorPoint().getCoordinates() //坐标
                  } else if (geom instanceof LineString) {
                    output = formatLength(/** @type {ol.geom.LineString} */(geom)) //长度值
                    tooltipCoord = geom.getLastCoordinate() //坐标
                  }
                  measureTooltipElement.innerHTML = output //将测量值设置到测量工具提示框中显示
                  measureTooltip.setPosition(tooltipCoord) //设置测量工具提示框的显示位置
                })
              },
              this
            )
            //绑定交互绘制工具结束绘制的事件
            draw.on('drawend', function (evt) {
                measureTooltipElement.className = 'tooltip tooltip-static' //设置测量提示框的样式
                measureTooltip.setOffset([0, -7])
                // unset sketch
                sketch = null //置空当前绘制的要素对象

                // unset tooltip so that a new one can be created
                measureTooltipElement = null //置空测量工具提示框对象
                createMeasureTooltip() //重新创建一个测试工具提示框显示结果

                helpTooltipElement.style.display = 'none'
                unByKey(listener)
                draw.setActive(false) //取消激活状态，以便退出绘制
              },
              this
            )
          }

          /**
           *创建一个新的帮助提示框（tooltip）
           */
          function createHelpTooltip() {
            if (helpTooltipElement) {
              helpTooltipElement.parentNode.removeChild(helpTooltipElement)
            }
            helpTooltipElement = document.createElement('div')
            helpTooltipElement.className = 'tooltip hidden'
            helpTooltip = new Overlay({
              element: helpTooltipElement,
              offset: [15, 0],
              positioning: 'center-left'
            })
            that.map.addOverlay(helpTooltip)
          }
          /**
           *创建一个新的测量工具提示框（tooltip）
           */
          function createMeasureTooltip() {
            if (measureTooltipElement) {
              measureTooltipElement.parentNode.removeChild(measureTooltipElement)
            }
            measureTooltipElement = document.createElement('div')
            measureTooltipElement.className = 'tooltip tooltip-measure'
            measureTooltip = new Overlay({
              element: measureTooltipElement,
              offset: [0, -15],
              positioning: 'bottom-center'
            })
            that.map.addOverlay(measureTooltip)
          }

          /**
           * 测量长度输出
           * @param {ol.geom.LineString} line
           * @return {string}
           */

          let formatLength = function (line) {
            let length = getLength(line, {
              projection: that.mapParams.projection
            })
            let output
            if (length > 100) {
              output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km'
            } else {
              output = Math.round(length * 100) / 100 + ' ' + 'm'
            }
            return output
          }

          /**
           * 测量面积输出
           * @param {ol.geom.Polygon} polygon
           * @return {string}
           */
          let formatArea = function (polygon) {
            //第二个formatArea函数了，这里还是用area全局变量吧
            let area = getArea(polygon, {
              projection: that.mapParams.projection
            })
            let output
            if (area > 10000) {
              output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>'
            } else {
              output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>'
            }
            return output
          }
          //endregion 测量功能
        //}
        //endregion

      },








      //region初始化添加图层到地图里
      addLayerAtInit({lyrType,srcType,mUrl,mTitle,mName,mIP,mPort,mProjection,mExtent,mVisible,mSubLayers}){
        let that = this;
        let lyrArr = []
        let lyr = null
        
        if (lyrType === 'Tile' && srcType === 'XYZ'){
            if (mTitle === "路网" || mTitle === "卫星" || mTitle === "文字标注") {
              lyr = new Tile({
                title: mTitle,
                name: mName,
                visible: mVisible,
                source: new XYZ({
                  url: mUrl,
                })
              })
            }
          lyrArr.push(lyr)
        }
        else if(lyrType === 'MapDocTileLayer' && srcType === 'Zondy'){ //Zondy地图文档瓦片图层
          lyr = new Zondy.Map.MapDocTileLayer(mTitle, mName, {
                ip: mIP,
                port: mPort,
                projection: mProjection,//默认是4326的
                title: mTitle, //官方Zondy.Map.MapDocTileLayer里是没有这个属性的
                visible: mVisible, //官方Zondy.Map.MapDocTileLayer里是没有这个属性的
            });
          lyrArr.push(lyr)
        }
        else if(lyrType === 'TileLayer' && srcType === 'Zondy'){  //Zondy瓦片地图服务
          lyr = new Zondy.Map.TileLayer(mTitle, mName, {
            ip: mIP,
            port: mPort,
            projection: mProjection,//默认是4326的
            title: mTitle, //官方Zondy.Map.TileLayer里是没有这个属性的
            visible: mVisible, //官方Zondy.Map.TileLayer里是没有这个属性的
          });
          lyrArr.push(lyr)
        }
        else if(lyrType === 'Doc' && srcType === 'Zondy'){  //Zondy矢量地图文档服务
          lyr = new Zondy.Map.Doc(mTitle, mName, {
            ip: mIP,
            port: mPort,
            projection: mProjection,//默认是4326的
            title: mTitle, //官方Zondy.Map.Doc里是没有这个属性的
            visible: mVisible, //官方Zondy.Map.Doc里是没有这个属性的
          });
          lyrArr.push(lyr)
        }
        else if(lyrType === 'GdbpLayer' && srcType === 'Zondy'){  //Zondy矢量图层服务
          lyr = new Zondy.Map.GdbpLayer(mTitle, mName, {  //例如：['gdbp://MapGisLocal/sample/ds/地图综合/sfcls/水系']，要以数组形式注入
            ip: mIP,
            port: mPort,
            //projection: mProjection,//默认是4326的  /*好像GdbpLayer类型等就不需要指定坐标系了，但必须有extent*/
            extent:mExtent, /*注意：必须得有这个属性，否则出现加载不出数据且导致浏览器崩溃*/
            title: mTitle, //官方Zondy.Map.GdbpLayer里是没有这个属性的
            visible: mVisible, //官方Zondy.Map.GdbpLayer里是没有这个属性的
            style: new Zondy.Object.CDisplayStyle({
              AnnSizeFixed:true,//注记符号大小固定
              PntSizeFixed:true,//点状符号大小固定，否则就显示很小而凸显不出来
              LinSizeFixed:true,//线状符号大小固定
              RegSizeFixed:true,//填充符号大小固定
              ShowCoordPnt:true,//显示坐标点
              //ShowElemRect:true,//显示元素的外包矩形
            })
          });
          lyrArr.push(lyr)
        }
        else if (lyrType === 'Group') {
          let lG = []
          for (let i = 0; i < mSubLayers.length; i++) {
            let lyr4tmps = null
            lyr4tmps = that.addLayerAtInit(mSubLayers[i])
            lyr4tmps.forEach(value => {
              lG.push(value)
            })
          }
          lyr = new Group({
            title: mTitle,
            visible: mVisible,
            layers: lG
          })
          lyrArr.push(lyr)
        } else {
          console.log(lyrType,srcType,mUrl,mTitle,'抱歉，地图资源类型不明，请检查并重试，或联系管理员协助解决。')
        }
        return lyrArr
      },
      //endregion








      //region地图属性查询
      //基于Zondy等地图属性查询
      AttQuery(){
        let that = this;

        let sxcxArr = that.MYCONFIG.attrQuery[that.pn]; //有值，或undefined
            console.log(sxcxArr,"that.MYCONFIG.attrQuery[that.pn]",86543);

        clearA();
        //显示进度条
        startPressBar();

        //初始化查询结构对象，设置查询结构包含几何信息
        var queryStruct = new Zondy.Service.QueryFeatureStruct();
        //是否包含几何图形信息
        queryStruct.IncludeGeometry = true;
        //是否包含属性信息
        queryStruct.IncludeAttribute = true;
        //是否包含图形显示参数
        queryStruct.IncludeWebGraphic = false;
        //实例化查询参数对象
        var queryParam = new Zondy.Service.QueryParameter({
          resultFormat: "json",
          struct: queryStruct
        });
        //设置查询分页号
        queryParam.pageIndex = 0;
        //设置查询要素数目
        queryParam.recordNumber =20;
        //设置属性条件
        //queryParam.where = document.getElementById("Conditions").value;
        //queryParam.where = "类型='土特产'";
        queryParam.where = that.attQueryConditions;
        console.log(queryParam,14)
        //实例化地图文档查询服务对象
        //var queryService = new Zondy.Service.QueryDocFeature(queryParam, "gn_dish", 1, { //①查询参数信息,②地图文档名称,③图层索引号,④{属性键值对}
        var queryService = new Zondy.Service.QueryDocFeature(queryParam, sxcxArr[0].layerName, sxcxArr[0].lyrIndex, { //①查询参数信息,②地图文档名称,③图层索引号,④{属性键值对}
          //ip: "develop.smaryun.com",
          //port: "6163"    //访问IGServer的端口号，.net版为6163，Java版为8089          
          ip: sxcxArr[0].mIP,
          port: sxcxArr[0].mPort    //访问IGServer的端口号，.net版为6163，Java版为8089
        });
        //执行查询操作，querySuccess为查询回调函数
        queryService.query(querySuccess, queryError);

        //查询失败回调
        function queryError(e) {
          //停止进度条
          stopPressBar();
        }

        //查询成功回调
        var drawLayer = null;
        function querySuccess(result) {
          //停止进度条
          stopPressBar();
          //初始化Zondy.Format.PolygonJSON类
          var format = new Zondy.Format.PolygonJSON();
          //将MapGIS要素JSON反序列化为ol.Feature类型数组
          var features = format.read(result);
          //var features = (new GeoJSON()).readFeatures(result.result.recordsets[0].features)
          console.log(features,16)

          //实例化一个矢量图层drawLayerr用于高亮显示结果
          var drawSource = new Vector({
            wrapX: false
          });
          drawSource.addFeatures(features);
          drawLayer = new lVector({
            title:"地图属性查询结果图层",
            source: drawSource,
            style: new Style({
              //填充色
              fill: new Fill({
                color: 'rgba(255, 0, 0, 0.5)'
              }),
              //边线样式
              stroke: new Stroke({
                color: 'rgba(255,204, 51, 1)',
                width: 1
              }),
              image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
                //anchor: [0.5, 0.9],
                //anchor: [0.8, 0.5], //勉强可行
                //anchor: [0, 0.5], //基本可行
                //anchor: [0, 0], //一个准，一个偏移
                anchor: [0.55, 0.95], //基本准了
                //src: that.location_green  //此处得用base64格式的图片源才能显示出来
                src: sxcxArr[0].resultIcon  //此处得用base64格式的图片源才能显示出来
              })
            })
          });

          that.map.addLayer(drawLayer);          
        }
        //清除客户端查询结果信息
        function clearA() {
          //停止进度条
          stopPressBar();
          if (drawLayer) {
            //移除高亮显示结果图层drawLayerr
            map.removeLayer(drawLayer);
          }
          else
            return;
        }
        /*======进度条======*/
        //停止进度条
        function stopPressBar() {
          document.getElementById("preview").style.display = "none";
        }
        //开始进度条动画
        function startPressBar() {
          document.getElementById("preview").style.display = "block";
        }
      },      
      //endregion

      //region地图几何空间查询
      geometryQuery(){
        let that=this;

        //let queryUrl,layerName,attributeFilter;
        let mIP,mPort,layerName,lyrIndex,resultIcon,layerTitle;

        let jhcxArr = that.MYCONFIG.geometryQuery[that.pn]; //有值，或undefined
            console.log(jhcxArr,"that.MYCONFIG.geometryQuery[that.pn]",86543);
        if(jhcxArr){
          jhcxArr.forEach(item=>{
            console.log(item,"that.MYCONFIG.geometryQuery[that.pn].item",901);
            //queryUrl=item.queryUrl;
            mIP=item.mIP;
            mPort=item.mPort;
            layerName=item.layerName;
            lyrIndex=item.lyrIndex;
            resultIcon=item.resultIcon;
            layerTitle=item.layerTitle;

          });
        }

        this.myClearGeometryQuery();//先清除先前的图形以避免干扰

        let vectorLayer, interaction, source,feature;
        source = new Vector({wrapX: false});
        vectorLayer = new lVector({
          title:"几何查询的overlay图层",
          source: source,
          style: new Style({
            stroke: new Stroke({
              color: 'red',
              width: 3
            }),
          })
        });
        this.map.addLayer(vectorLayer);
        this.geometryQueryVectorLayer=vectorLayer;

        interaction = new Draw({
          source: source,
          type: "Polygon",
        });

        this.geometryQueryInteraction = interaction;//传出去以便后续集中清理掉
        this.map.addInteraction(interaction);

        interaction.on('drawstart', function (evt) {
          feature = evt.feature;
        });
        interaction.on('drawend', function () {

          that.map.removeInteraction(interaction) //移除绘制图形的交互动作         

          //基于Zondy的方式，要对feature做一下特别从处理才行
          drawToolCallback_Polygon(feature);

          function drawToolCallback_Polygon(feature)
          {
            //显示进度条
            startPressBar();

            //创建一个用于查询的区
            var geomObj = new Zondy.Object.Polygon();
                //console.log(feature,23)
                //console.log(feature.getGeometry(),231) //方式一能获取几何图形
                //console.log(feature.values_.geometry,232) //方式二也能获取几何图形
            //geomObj.setByOL(feature.feature.values_.geometry);//案例中的写法在这里不生效
            geomObj.setByOL(feature.getGeometry())
            GeomQuery(geomObj); //执行Zondy几何空间查询
          }

        });

        function GeomQuery(geomZD)
        {
          //初始化查询结构对象，设置查询结构包含几何信息
          var queryStruct = new Zondy.Service.QueryFeatureStruct();
          //是否包含几何图形信息
          queryStruct.IncludeGeometry = true;
          //是否包含属性信息
          queryStruct.IncludeAttribute = true;
          //是否包含图形显示参数
          queryStruct.IncludeWebGraphic = false;
          //指定查询规则
          var rule = new Zondy.Service.QueryFeatureRule({
            //是否将要素的可见性计算在内
            EnableDisplayCondition: false,
            //是否完全包含
            MustInside: false,
            //是否仅比较要素的外包矩形
            CompareRectOnly: false,
            //是否相交
            Intersect: true
          });
          //实例化查询参数对象
          var queryParam = new Zondy.Service.QueryParameter({
            r: Math.random(),
            geometry: geomZD,
            resultFormat: "json",
            struct: queryStruct,
            rule: rule
          });
          //设置查询分页号
          queryParam.pageIndex = 0;
          //设置查询要素数目
          queryParam.recordNumber = 20;
          //实例化地图文档查询服务对象
          //var queryService = new Zondy.Service.QueryDocFeature(queryParam, "gn_snack", "1", {
          var queryService = new Zondy.Service.QueryDocFeature(queryParam, layerName, lyrIndex, {
            //ip: "develop.smaryun.com",
            //port: "6163"    //访问IGServer的端口号，.net版为6163，Java版为8089
            ip: mIP,
            port: mPort    //访问IGServer的端口号，.net版为6163，Java版为8089
          });
          //执行查询操作，querySuccess为查询回调函数
          queryService.query(querySuccess, queryError);
        }

        //查询失败回调
        function queryError(e) {
          //停止进度条
          stopPressBar();
        }

        //查询成功回调
        function querySuccess(result) {
          //停止进度条
          stopPressBar();
          //初始化Zondy.Format.PolygonJSON类
          var format = new Zondy.Format.PolygonJSON();
          //将MapGIS要素JSON反序列化为ol.Feature类型数组
          var features = format.read(result);

          let vectorSource = new Vector({
            //features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
            features: features, //或后续通过vectorSource.addFeatures(features)来添加
            wrapX: false
          });
          let resultLayer = new lVector({
            title:"几何空间查询结果图层",
            source: vectorSource,
            style: new Style({
              //填充色
              fill: new Fill({
                color: 'rgba(255, 0, 0, 0.5)'
              }),
              //边线样式
              stroke: new Stroke({
                color: 'rgba(255,204, 51, 1)',
                width: 1
              }),
              image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
                //anchor: [0.5, 0.9],
                //anchor: [0.8, 0.5], //勉强可行
                //anchor: [0, 0.5], //基本可行
                //anchor: [0, 0], //一个准，一个偏移
                anchor: [0.55, 0.95], //基本准了
                //src: that.location_blue  //此处得用base64格式的图片源才能显示出来
                src: resultIcon  //此处得用base64格式的图片源才能显示出来
              })
            })
          });
          that.map.addLayer(resultLayer);

          /*后续也可以通过这种方式来指定样式*/
          /*let myStyle = new Style({
            image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
              anchor: [0.5, 0.9],
              src: that.location_blue  //此处得用base64格式的图片源才能显示出来
            })
          });
          resultLayer.setStyle(myStyle)*/

        } //end of querySuccess(result)

        /*======进度条======*/
        //停止进度条
        function stopPressBar() {
          document.getElementById("preview").style.display = "none";
        }
        //开始进度条动画
        function startPressBar() {
          document.getElementById("preview").style.display = "block";
        }       

      },
      //endregion

      //region（清除/取消）几何查询的图形
      myClearGeometryQuery(){
        let that = this;
        that.map.removeLayer(that.geometryQueryVectorLayer);//清除图形
        that.map.removeInteraction(that.geometryQueryInteraction) //移除绘制图形的交互动作
        //let ols = that.map.getOverlays();
      },
      //endregion

      //透明度调节
      handleOpt() {
        document.body.classList.toggle('hideOpacity')
        document.body.classList.toggle('hidePercent')
      },

      //地图中的面板可拖动
      dragFunc(id) {
        var Drag = document.getElementById(id);
        Drag.onmousedown = function(event) {
          var ev = event || window.event;
          event.stopPropagation();
          var disX = ev.clientX - Drag.offsetLeft;
          var disY = ev.clientY - Drag.offsetTop;
          document.onmousemove =
            function(event) {
              var ev = event ||
                window.event;
              Drag.style.left = ev.clientX - disX + "px";
              Drag.style.top = ev.clientY -
                disY + "px";
              Drag.style.cursor = "move";
            };
        };
        Drag.onmouseup = function () {
          document.onmousemove = null;
          this.style.cursor = "default";
        };
      }
    },
    created(){
      //region 地图左上角-功能启动图标按钮-初始化控制
      if(this.mapCtrlTools !== undefined && this.mapCtrlTools.length>0){
        this.mapCtrlTools.forEach(item=>{
          if(item === 1){
            this.layerShow = true; //图层控制-功能启动图标按钮
          }else if(item === 2){
            this.measureShow = true; //测量工具-功能启动图标按钮
          }else if(item === 3){
            this.decorateShow = true; //地图整饰-功能启动图标按钮
          }
          else if(item === 4){
            this.attrQueryPanelShow = true; //属性查询-功能启动图标按钮
          }else if(item === 5){
            this.geometryQueryPanelShow = true; //几何空间查询-功能启动图标按钮
          }
          else if(item === 6){
            this.bufferAnalystPanelShow = true; //缓冲区分析-功能启动图标按钮
          }
          else if(item === 7){
            this.heatMapAnalystPanelShow = true; //热力图分析-功能启动图标按钮
          }
          else if(item === 8){
            this.clusterLayerPanelShow = true; //聚类图-功能启动图标按钮
          }
          else if(item === 9){
            this.thiessenAnalystPanelShow = true; // (数据集)泰森多边形分析-功能启动图标按钮
          }
        });
      }
      //endregion
    },
    mounted(){
      /*地图初始化*/
      this.initMyMap();
      /*让地图中的某些面板可拖动*/ 
      //this.dragFunc(this.lyrBox);
      this.dragFunc("sxcx"); //属性查询面板-可拖动
      this.dragFunc("jhcx"); //几何分析面板-可拖动
      this.dragFunc("hcqfx"); //缓冲区分析面板-可拖动
      this.dragFunc("rlt"); //热力图面板-可拖动
      this.dragFunc("jlt"); //聚类图面板-可拖动
      this.dragFunc("tsdbx"); //泰森多边形分析面板-可拖动
    },
    watch:{},
    computed:{
      lyrBox: function () {
        return 'lyrBoxDiv' + new Date().valueOf()
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/styles/my-map.css';  
</style>
